<template>
   <div class="recommend-container">
    <div class="head">
        <div class="title">
            <span>热门好歌推荐</span>
            <uni-icons
                type="right"
                color="black"
                size="18"
            />
        </div>
        <div class="icons">
          <IconComponent type="refreshempty"/>
            <IconComponent  type="more-filled" />
            
        </div>
    </div>
    <div class="content">
        <MusicItem/>
        <MusicItem/>
        <MusicItem/>
    </div>
   </div>
</template>

<script setup lang="ts">
import IconComponent from '../IconComponent.vue';
import MusicItem from '../MusicItem.vue'
</script>

<style scoped lang="scss">
.recommend-container{
  height: 30vh;

  display: flex;
  flex-direction: column;
padding:  0.2rem ;

  .head{
  
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem ;
    margin-bottom: 0.5rem;
    .title{
        
    font-weight: 700;
        font-size: large;
        
       
    }
    .icons{
        display: flex;
        gap: 1rem;
    }
  }
  .content{
  
    flex: 9;
    
  }


}
</style>
